<template>
  <!-- 审批待办、业务待办、我发起的 -->
  <div class="TodoList-container">
    <a-tabs v-model="activeKey">
      <a-tab-pane v-for="tab in tabList" :key="tab.key" :forceRender="true">
        <template slot="tab">
          <a-badge :count="tab.total" :number-style="{ backgroundColor: '#F59A23' }" :offset="[6, 0]">
            <span>{{ tab.name }}</span>
          </a-badge>
        </template>
        <div v-show="activeKey === 'MsgNotify' && tab.total" class="msg-par-wrapper">
          <!-- 消息通知 -->
          <div class="msg-wrapper">
            <div class="msg-header">
              <div class="sumary-title"></div>
              <div class="all-btn">
                <div class="read-all base-btn" @click="readAllMessage">
                  <span>全部已读</span>
                </div>
                <div class="look-all base-btn" @click="lookAllMessage"><span class="all-btn-text">查看全部</span> <a-icon class="all-btn-symbol" type="right" /></div>
              </div>
            </div>
            <div class="msg-body">
              <a-timeline v-if="messageList.length > 0">
                <a-timeline-item v-for="item in messageList" :key="item.id" :color="item.hasRead ? 'gray' : 'red'">
                  <div class="msg-preinfo">
                    <span class="date-info">{{ filterTime(item.createTime) }}</span>
                    <div v-if="!item.hasRead" @click="readSingleMessage(item)">
                      <a-icon v-if="item.isReading" type="loading" />
                      <img v-else class="read-icon base-btn" src="~@/assets/indexPage/read.png" alt="" />
                    </div>
                  </div>
                  <div class="msg-info" :class="{ 'readed-msg': item.hasRead }" @click="toMessageDetail(item)">
                    <div class="msg-info-header">
                      <span class="msg-info-title">{{ item.title }}</span>
                      <span class="ml12" :class="getClass(item.messageType)">
                        {{ item.messageType | newsTypeFilter }}
                      </span>
                    </div>
                    <Ellipsis :length="60" :title="item.content" class="msg-info-content">
                      {{ item.messageType == 4 ? resolveMessage(item.content).labelText : item.content }}
                    </Ellipsis>
                  </div>
                </a-timeline-item>
              </a-timeline>
              <EmptyWrapper v-else>
                <template v-slot:img>
                  <img class="msg-empty-img" src="~@/assets/indexPage/msg-empty.png" alt="" />
                </template>
                <span>暂无消息</span>
              </EmptyWrapper>
              <div class="extra-tip">
                <span v-if="messageList.length > 0 && messageList.length <= 30">没有更多消息了</span>
                <span v-if="messageList.length > 30">更多消息请点击查看全部</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 审批待办 -->
        <div v-show="activeKey === 'audit' && tab.total" class="todo-wrapper">
          <div class="todo-list-more" @click="$router.push({ path: '/matters/list/todo' })">
            <span>查看全部</span>
            <a-icon type="right" />
          </div>
          <s-table :ref="`${tab.key}Table`" :bordered="false" :size="size" :columns="auditColumn" :data="loadAuditData" :show-pagination="false" class="todo-list-table" row-key="id" :scroll="{ y: height }">
            <template slot="taskSource" slot-scope="text">
              {{ resolveSource(text) }}
            </template>
            <template slot="action" slot-scope="text, record">
              <a v-if="isNeedReslove(record.businessType)" class="todo-list-table-btn" @click="handleAudit(record)">处理</a>
              <a v-else class="todo-list-table-btn" @click="handleAudit(record)">{{ actionMap[record.taskType] }}</a>
            </template>
            <template slot="detail" slot-scope="text, record">
              <span class="todo-list-table-btn-img" @click="handleApproval(record)">
                <img src="~@/assets/indexPage/todo-list-more.png" alt="" />
              </span>
            </template>
          </s-table>
        </div>
        <!-- 业务待办 -->
        <div v-show="activeKey === 'business' && tab.total" class="todo-wrapper">
          <div class="todo-list-more" @click="$router.push({ path: '/matters/list/todo' })">
            <span>查看全部</span>
            <a-icon type="right" />
          </div>
          <s-table :ref="`${tab.key}Table`" :size="size" :columns="businessColumn" :data="loadBusinessData" :show-pagination="false" class="todo-list-table" :scroll="{ y: height }">
            <template slot="action" slot-scope="text, record">
              <span class="todo-list-table-btn" @click="handleResolve(record)">处理</span>
            </template>
          </s-table>
        </div>
        <!-- 业务待办 -->
        <!-- 我发起的 -->
        <div v-show="activeKey === 'fromSelf' && tab.total" class="todo-wrapper">
          <div class="todo-list-more" @click="$router.push({ path: '/meLaunch/list/done' })">
            <span>查看全部</span>
            <a-icon type="right" />
          </div>
          <div class="last-todo-wrapper">
            <s-table
              :ref="`${tab.key}Table`"
              :size="size"
              :columns="selfColumn"
              :data="loadSelfData"
              class="todo-list-table"
              row-key="id"
              :show-pagination="false"
              :row-class-name="getRowClassName"
              :custom-row="
                (record, index) => {
                  return {
                    on: {
                      click: () => {
                        selectTableRow(record, index)
                      }
                    }
                  }
                }
              "
            >
              <template slot="name" slot-scope="text, record">
                <span @click="handelToAuditDetail(record)" style="text-decoration: underline; cursor: pointer; font-size: 13px"> {{ text }}</span>
              </template>
            </s-table>
            <div class="node-wrapper">
              <p>{{ tasktitle }}</p>
              <div v-loading="loadingState.isNodeDetail" class="node-list">
                <a-timeline mode="right">
                  <a-timeline-item v-for="{ taskDefKey, statusInfo, taskName, createTime, auditResult, completed, userName } in curNodeList" :key="taskDefKey" :color="statusInfo.color">
                    <div class="node-item">
                      <section>
                        <p class="text-ellipsis" :title="taskName">
                          {{ taskName }}
                        </p>
                        <span>{{ createTime }}</span>
                      </section>
                      <section>
                        <p :style="{ color: statusInfo.color }">
                          {{ statusInfo.label }}
                        </p>
                        <span class="text-ellipsis" :title="userName">{{ userName }}</span>
                      </section>
                    </div>
                  </a-timeline-item>
                </a-timeline>
              </div>
            </div>
          </div>
        </div>
        <!-- 我发起的 -->
        <EmptyWrapper v-if="!tab.total" :style="{ height: height + 34 + 'px' }">
          <template v-slot:img>
            <img class="empty-img" src="~@/assets/indexPage/todo-empty.png" alt="" />
          </template>
          <span>暂无数据</span>
        </EmptyWrapper>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { BUSINESS_SOURCE_MAP } from '@/config/businessConfig.js'
import { handleAuditInList, toAuditDetail, getTimeGap } from '@/utils/util'
import { timeline } from 'ant-design-vue'
import { getUserTodo, getUserTodoBusiness, getSelfAuditList, getProcessNodeDetail } from '@/utils/requestWithParams.js'
import { getMessageList, updateMessageRead, updateAllMessageRead } from '@/api/indexPage'
import Ellipsis from '@/components/Ellipsis'
import messageBase from '@/views/matters/message/baseconfig.js'
import EmptyWrapper from './EmptyWrapper.vue'

const auditColumn = [
  {
    title: '日期',
    dataIndex: 'createTime',
    width: '50px',
    customRender: (text) => {
      if (text.indexOf(' ') > -1) {
        return text.split(' ')[0]
      } else {
        return
      }
    }
  },
  {
    title: '事项名称',
    dataIndex: 'processName',
    width: '100px',
    // align: 'center',
    // ellipsis: true,
  },
  {
    title: '发起单位',
    dataIndex: 'startOrgName',
    width: '100px',
    // align: 'center',
    // ellipsis: true,
  },
  {
    title: '关键信息',
    dataIndex: 'keyword',
    // align: 'center',
    // ellipsis: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    // align: 'center',
    // ellipsis: true,
    width: '40px'
  },
  // {
  //   title: '审批信息',
  //   dataIndex: 'detail',
  //   scopedSlots: { customRender: 'detail' },
  //   align: 'center',
  //   ellipsis: true,
  //   // width: '95px'
  // }
]
const businessColumn = [
  {
    title: '日期',
    dataIndex: 'createTime',
    width: '95px',
    customRender: (text) => {
      if (text.indexOf(' ') > -1) {
        return text.split(' ')[0]
      } else {
        return
      }
    }
  },
  {
    title: '标题',
    dataIndex: 'noticeTitle',
    width: '150px'
  },
  {
    title: '内容',
    dataIndex: 'noticeContent',
    ellipsis: true,
    width: '130px'
  },
  {
    title: '发起人',
    dataIndex: 'createName',
    align: 'center',
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    width: '85px'
  }
]

const minBusinessColumn = [
  {
    title: '日期',
    dataIndex: 'createTime',
    width: '95px',
    customRender: (text) => {
      if (text.indexOf(' ') > -1) {
        return text.split(' ')[0]
      } else {
        return
      }
    }
  },
  {
    title: '标题',
    dataIndex: 'noticeTitle',
    width: '120px'
  },
  {
    title: '内容',
    dataIndex: 'noticeContent',
    ellipsis: true,
    width: '100px'
  },
  {
    title: '发起人',
    dataIndex: 'createName',
    align: 'center',
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    width: '85px'
  }
]

const selfColumn = [
  {
    title: '日期',
    dataIndex: 'startTime',
    width: '95px',
    customRender: (text) => {
      if (text.indexOf(' ') > -1) {
        return text.split(' ')[0]
      } else {
        return
      }
    }
  },
  {
    title: '事项名称',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' }
  }
]
const tabList = [
  {
    key: 'MsgNotify',
    name: '消息通知',
    total: 0
  },
  {
    key: 'audit',
    name: '审批待办',
    total: 0,
    request: getUserTodo
  },
  {
    key: 'business',
    name: '业务待办',
    total: 0,
    request: getUserTodoBusiness
  },
  {
    key: 'fromSelf',
    name: '我发起的',
    total: 0,
    request: getSelfAuditList
  }
]
export default {
  name: 'TodoList',
  components: {
    [timeline.name]: timeline, // "ATimeline"
    [timeline.Item.name]: timeline.Item, // "ATimelineItem"
    EmptyWrapper,
    Ellipsis
  },
  filters: {
    newsTypeFilter(type) {
      return messageBase.newsTypeMap[type] && messageBase.newsTypeMap[type].text
    },
    typeColor(type) {
      return messageBase.newsTypeMap[type] && messageBase.newsTypeMap[type].color
    }
  },
  data() {
    return {
      loadingState: {
        isNodeDetail: false
      },
      curNodeList: [], // 当前进行的节点
      totalCount: 0,
      messageList: [], // 消息通知列表
      actionMap: {
        1: '审批',
        2: '处理',
        3: '签名'
      },
      activeKey: 'MsgNotify',
      tabList,
      auditColumn,
      businessColumn,
      selfColumn,
      // 页面高度
      screenHeight: document.body.clientHeight,
      // 表格高度
      height: 50,
      nodeWrapper: 50,
      // 表格size
      size: 'small',
      selectedIndex: null,
      tasktitle: '事项名称' // 事由名称
    }
  },
  created() {
    this.getMessageListReq()
    this.initTimer()
  },
  watch: {
    // 监听屏幕高度改变
    screenHeight: {
      handler(newV) {
        console.log(newV)
      }
    }
  },
  mounted() {
    this.initMessageListener()
    this.getScreenHeight()
  },
  beforeDestroy() {
    if (this.timerId) {
      clearTimeout(this.timerId)
      this.timerId = null
    }
  },
  methods: {
    getClass(color) {
      var className = ''
      switch (color) {
        case 1:
          className = 'color-FA9233'
          break
        case 3:
          className = 'color-f59a23'
          break
        default:
          className = 'color-0088EC'
      }
      return className
    },
    resolveMessage(msg) {
      if (!msg)
        return {
          originText: msg,
          keyText: '',
          labelText: msg
        }
      let key = ''
      ;(msg.replace &&
        msg.replace(/^\[(.+?)\]/g, function (...args) {
          key = args[0]
        })) ||
        ''
      return {
        originText: msg,
        keyText: key.substring(1, key.length - 1),
        labelText: (msg.replace && msg.replace(key, '')) || ''
      }
    },
    toMessageDetail(data) {
      this.$router.push({
        path: '/matters/news/read',
        query: {
          needJump: JSON.stringify({
            createTime: data.createTime,
            text: {
              ...data,
              id: data.messageSendId
            }
          })
        }
      })
    },
    filterTime(val) {
      return getTimeGap(val)
    },
    /**
     * 查看所有消息
     */
    lookAllMessage() {
      this.$router.push({
        path: '/matters/news/toread'
      })
    },
    /**
     * 将所有消息标记已读
     */
    readAllMessage() {
      if (!this.totalCount) {
        this.$message.warning('没有未读消息')
        return
      }
      this.$confirm({
        content: '请确认是否将所有消息标记为已读？',
        onOk: async () => {
          await updateAllMessageRead({
            receiverId: this.messageList[0].receiversId
          })
          this.getMessageListReq()
          return
        }
      })
    },
    /**
     * 将单个消息标记为已读
     * @param {Object} data
     */
    async readSingleMessage(data) {
      try {
        if (data.isReading) return
        this.$set(data, 'isReading', true)
        const { messageSendId, receiversId } = data
        const params = {
          sendId: messageSendId,
          receiversId
        }
        await updateMessageRead(params)
        data.hasRead = true // 接口调用成功后，将该消息置为已读
      } catch (e) {
        console.error(e)
      }
      this.$set(data, 'isReading', false)
    },
    /**
     * 初始化timer，轮询获取消息通知
     */
    initTimer() {
      if (this.messageTimer) {
        clearTimeout(this.messageTimer)
        this.messageTimer = null
      }
      this.messageTimer = setTimeout(() => {
        this.getMessageListReq()
        this.initTimer()
      }, 1000 * 600)
      this.$once('hook:beforeDestroy', () => {
        clearTimeout(this.messageTimer)
      })
    },
    /**
     * 获取消息通知的列表
     */
    async getMessageListReq() {
      try {
        const params = {
          pageNum: 1,
          pageSize: 31,
          param: {}
        }
        const res = await getMessageList(params)
        this.messageList = res.data?.list || []
        this.totalCount = this.messageList.filter((item) => !item.hasRead).length
        this.tabList[0].total = this.totalCount
      } catch (e) {
        console.log(e)
      }
    },
    initMessageListener() {
      const handler = (e) => {
        const fromOrigin = e.origin || e.originalEvent.origin
        if (fromOrigin === window.location.origin) {
          // 验证是否同源，避免第三方攻击
          if (e.data === 'finish') {
            // 验证完成标志
            this.refreshAllTable()
          }
        }
      }
      window.addEventListener('message', handler, false)
      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('message', handler)
      })
    },
    /**
     * 过滤节点的状态，生成相应的文本及颜色信息
     * @param {Number} completed 节点状态 0 | 1 | 2
     * @param {String} auditResult 审批结果 '审批通过' | '审批不通过' | ''
     */
    filterNodeStatus({ completed, auditResult } = {}) {
      const map = {
        0: {
          label: '进行中',
          color: 'gray'
        },
        2: {
          label: '未开始',
          color: 'gray'
        }
      }
      // 已完成
      if (completed === 1) {
        return {
          label: auditResult,
          color: auditResult === '审批通过' ? '#02CA73' : 'red'
        }
      } else {
        return map[completed] || {}
      }
    },
    getRowClassName(record, index) {
      if (index === this.selectedIndex) {
        return 'selected-row'
      } else {
        ;('')
      }
    },
    /**
     * 选中表格行
     */
    async selectTableRow(record, index) {
      try {
        if (this.selectedIndex === index) return
        if (this.loadingState.isNodeDetail) {
          this.$message.warning('请等待节点信息加载完毕')
          return
        }
        this.tasktitle = record.name
        this.loadingState.isNodeDetail = true
        this.selectedIndex = index
        const options = {
          businessId: record.businessId
        }
        const res = await getProcessNodeDetail(options)
        this.curNodeList = (res.data || []).map((item) => {
          return {
            ...item,
            statusInfo: this.filterNodeStatus(item)
          }
        })
      } catch (e) {
        console.error(e)
      }
      this.loadingState.isNodeDetail = false
    },
    /**
     * @description: 监听屏幕变化
     * @param {*}
     * @return {*}
     */
    listenerScreenChange() {
      window.addEventListener('resize', this.getScreenHeight)
    },
    removeListenerScreenChange() {
      window.removeEventListener('resize', this.getScreenHeight)
    },
    /**
     * @description: 获取屏幕高度
     * @param {*}
     * @return {*}
     */
    async getScreenHeight() {
      let timer = setTimeout(() => {
        const h = document.body.querySelector('.TodoList-container').offsetHeight
        if (document.body.clientWidth > 1370 && document.body.clientWidth < 1450) {
          this.businessColumn = minBusinessColumn
        } else if (document.body.clientWidth < 1370) {
          this.businessColumn = minBusinessColumn
        } else {
          this.businessColumn = businessColumn
        }
        this.height = h - 137
        clearTimeout(timer)
        timer = void 0
      }, 2000)
    },
    /**
     * @description: 审批详情
     * @param {Object} record 行数据
     * @return {Void}
     */
    handleApproval(record) {
      this.$bus.$emit('showApprovalDetailsDialog', record.businessId)
    },
    /**
     * @description: 处理待办，这里可以根据业务需要做逻辑处理
     * @param {Object} data 行数据
     * @return {Void}
     */
    handleResolve(data) {
      this.$router.push({
        path: '/matters/list/todo',
        query: {
          tabKey: 'business',
          needJump: JSON.stringify(data)
        }
      })
    },
    handelToAuditDetail(data) {
      toAuditDetail.call(this, data)
    },
    handleAudit(val) {
      handleAuditInList.call(this, val)
    },
    isNeedReslove(businessType) {
      const whiteList = ['1007', '1008']
      return whiteList.includes(businessType)
    },
    resolveSource(val) {
      return BUSINESS_SOURCE_MAP[val] || ''
    },
    /**
     * @param {string} key 'audit' | 'business' | 'fromSelf'
     * @param {object} extraOptions 额外的配置项，可以覆盖默认的配置
     */
    loadData(key, extraOptions = {}) {
      const options = {
        filterParamsFn: (params) => {
          return {
            ...params,
            pageSize: 20,
            pageNo: 1
          }
        },
        ...extraOptions
      }
      const target = this.tabList.find((item) => item.key === key)
      return target
        .request(options)
        .then((res) => {
          target.total = res.totalSize || 0
          return res
        })
        .catch((e) => {
          console.error(e)
        })
    },
    loadAuditData() {
      return this.loadData('audit')
    },
    loadBusinessData() {
      return this.loadData('business')
    },
    loadSelfData() {
      return this.loadData('fromSelf', {
        sucessCallback: (res) => {
          if (res.data?.[0]) {
            this.selectTableRow(res.data?.[0], 0)
          }
        }
      })
    },
    triggerTimer() {
      if (this.timerId) {
        clearTimeout(this.timerId)
        this.timerId = null
      }
      this.timerId = setTimeout(() => {
        this.refreshAllTable()
        this.triggerTimer()
      }, 1000 * 10)
    },
    /**
     * 刷新所有表格的数据
     */
    refreshAllTable() {
      this.$refs[`${this.tabList[0].key}Table`].forEach((component) => {
        component && component.refresh()
      })
    }
  }
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';
@{deep} .selected-row {
  background-color: rgb(230, 247, 255);
}
.empty-img {
  width: 196px;
  height: 103px;
}
.todo-wrapper {
  height: 100%;
  .node-wrapper {
    // overflow-y: auto;
    margin-left: 2px;
    width: 50%;
    padding: 10px 0 10px 10px;
    //background-color: #fafafa;
    height: 100%;
    // overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background: rgba(144, 147, 153, 0.5);
    }
    &::-webkit-scrollbar-track {
      border-radius: 5px;
      background: transparent;
    }
    & > p {
      color: #909399;
      margin-bottom: 14px;
    }
    .node-list {
      // height:100%;
      height: calc(100% - 20px);
      // overflow-x: hidden;
      overflow-y: auto;
      padding-right: 14px;
      padding-top: 2px;
      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        background: rgba(144, 147, 153, 0.5);
      }
      &::-webkit-scrollbar-track {
        border-radius: 5px;
        background: transparent;
      }
    }
  }
}
.last-todo-wrapper {
  margin-top: 2px;
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  height: calc(100% - 41px);
     &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background: rgba(144, 147, 153, 0.5);
    }
    &::-webkit-scrollbar-track {
      border-radius: 5px;
      background: transparent;
    }
  .table-wrapper {
    flex: 1;
  }
  .todo-list-table {
    padding: 0 0 0 16px;
    height: 100%;
    overflow-y: scroll;
       &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background: rgba(144, 147, 153, 0.5);
    }
    &::-webkit-scrollbar-track {
      border-radius: 5px;
      background: transparent;
    }
    
  }
}
.node-item {
  display: flex;
  justify-content: space-between;
  section {
    width: 35%;
    p {
      color: #666666;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
    }
    span {
      color: #999999;
      font-size: 12px;
    }
    &:nth-of-type(1) {
      text-align: left;
      width: 60%;
      p {
        text-overflow: ellipsis;
        font-size: 12px;
      }
    }
  }
}
.todo-list-table {
  padding: 0 16px;
  @{deep} .ant-table-header > table {
    width: calc(100% + 12px);
  }
  @{deep} .ant-table-thead > tr > th {
    background: #fafafa;
    color: #909399;
  }
  @{deep} .ant-table-tbody > tr > td {
    border-color: #efefef;
    color: #333333;
    /*&:first-child {*/
      font-size: 12px;
    /*}*/
    //  text-overflow: -o-ellipsis-lastline;
    //   overflow: hidden;
    //   text-overflow: ellipsis;
    //   display: -webkit-box;
    //   -webkit-line-clamp: 2;
    //   line-clamp: 2;
    //   -webkit-box-orient: vertical;
  }
  @{deep} .ant-table-body {
    max-height: calc(100% - 92px);
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background: rgba(144, 147, 153, 0.5);
    }
    &::-webkit-scrollbar-track {
      border-radius: 5px;
      background: transparent;
    }
  }
}
.todo-list-table-btn {
  /*padding: 3px 11px;*/
  background-color: #edf9ff;
  color: #0289ca;
  cursor: pointer;
}
.TodoList-container {
  height: 100%;
  position: relative;
  @{deep} .ant-tabs-nav-wrap {
    // width: calc(100% - 76px);
    width: 100%;
  }
  @{deep} .ant-tabs-line {
    height: 100%;
    .ant-tabs-content {
      height: calc(100% - 44px);
    }
    .msg-par-wrapper {
      height: 100%;
    }
  }
}
.todo-list-more {
  width: 100%;
  padding: 10px 20px 10px 15px;
  cursor: pointer;
  text-align: right;
  // box-shadow: 3px 2px 20px 0px rgba(24, 48, 60, 0.1);
  span {
    font-size: 14px;
    color: #0289ca;
  }
  .anticon {
    font-size: 12px;
    color: #0289ca;
    margin: 0 2px;
  }
}
.todo-list-table-btn-img {
  cursor: pointer;
  img {
    width: 28px;
    height: 28px;
  }
}
.msg-wrapper {
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .msg-header {
    padding: 10px 20px 10px 0;
    line-height: 45px;
    border-bottom: 1px solid #ffffff;
    // box-shadow: 3px 2px 20px 0px rgba(24, 48, 60, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sumary-title {
      color: #161616;
      position: relative;
      font-weight: bolder;
      width: fit-content;
      .title-text {
        font-size: 18px;
        z-index: 3;
      }
      &::after {
        z-index: 2;
        display: block;
        content: '';
        width: 110%;
        height: 10px;
        background: #cdf1f9;
        position: absolute;
        bottom: 0;
      }
    }
    .all-btn {
      line-height: 24px;
      padding-left: 15px;
      flex: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #0289ca;
      .all-btn-text {
        margin-right: 4px;
      }
      .all-btn-symbol {
        color: #666666;
      }
    }
  }
  .msg-body {
    // max-height: 56vh;
    overflow-y: scroll;
    margin-right: -25px;
    padding: 20px;
  }
  .msg-empty-img {
    width: 232px;
    height: 160px;
  }
  .msg-preinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .date-info {
      font-size: 12px;
      color: #999999;
    }
    .read-icon {
      width: 16px;
      height: 16px;
    }
  }
  .readed-msg {
    background: #fafafa !important;
  }
  .msg-info {
    display: flex;
    flex-direction: column;
    background: #f1f6f9;
    padding: 16px;
    border-radius: 2px;
    .msg-info-header {
      padding-bottom: 12px;
      .ml12 {
        float: right;
        padding: 0 10px;
        font-size: 12px;
      }
      .color-0088EC {
        border: 1px solid #6cbbfa;
        color: #0088ec;
      }
      .color-f59a23 {
        border: 1px solid #ffc44c;
        color: #f59a23;
      }
      .color-FA9233 {
        border: 1px solid #fa9233;
        color: #fa9233;
      }
    }
    .msg-info-title {
      font-size: 16px;
      font-weight: bolder;
      color: #333333;
      line-height: 16px;
    }
    .msg-info-content {
      font-size: 12px;
      color: #888888;
      line-height: 18px;
    }
  }
  .extra-tip {
    text-align: center;
  }
}
@{deep} .ant-table-tbody > tr > td{
  padding: 9px 1px!important;
}

@{deep} .ant-table-thead > tr > th {
  padding: 9px 1px!important;
}
@media screen and (min-width: 1200px) and (max-width: 1440px) {
  @{deep} .ant-table-tbody > tr > td {
    border-color: #efefef;
    color: #333333;
      font-size: 12px;
  }
  .msg-wrapper {
    max-height: 300px;
  }
}
</style>